<template>
  <div>
    <div id="wordCloud" style="height: 300px; width: 280px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts/core";
import "echarts-wordcloud";
import { ref, toRefs, reactive, onMounted } from "vue";
import { word } from "@/http/chart.js";
const state = reactive({
  echartsData: [],
});
const listgett = async () => {
  const res = await word();
  state.echartsData = res.data;
  console.log(state.echartsData, "999");
  initChart();
};

onMounted(() => {
  listgett();
  setTimeout(() => {
    initChart();
  }, 1000);
});

const initChart = () => {
  const myChart = echarts.init(document.getElementById("wordCloud"));
  let option = {
    title: {
      text: "慕课 logo 文档云",
      top: "12%",
      left: "-2%",
    },
    tooltip: {
      trigger: "item",
    },
    backgroundColor: "#fff",
    // tooltip: {
    //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
    // },
    series: [
      {
        type: "wordCloud",
        //用来调整词之间的距离
        gridSize: 15,
        //用来调整字的大小范围
        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.
        sizeRange: [15, 30],
        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
        // rotationRange: [-45, 0, 45, 90],
        // rotationRange: [ 0,90],
        rotationRange: [0, 50],
        //随机生成字体颜色
        // maskImage: maskImage,
        textStyle: {
          color: function () {
            return (
              "rgb(" +
              Math.round(Math.random() * 300) +
              ", " +
              Math.round(Math.random() * 300) +
              ", " +
              Math.round(Math.random() * 300) +
              ")"
            );
          },
        },
        //位置相关设置
        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.
        left: "center",
        top: "center",
        right: null,
        bottom: null,
        width: "100%",
        height: "100%",
        //数据
        data: [...state.echartsData],
      },
    ],
  };
  myChart.setOption(option);

  // 点击某个字
  myChart.on("click", function (params) {
    console.log("myChart----click---:", params, "------", params.data);
  });
};
</script>

<style lang="scss" scoped>
</style>